import React, { Component } from 'react'
import './index.css'
export default class Item extends Component {
    state = { mouse: false };
    //划过改变颜色
    mouseHover = (flag) => {
        return () => {
            this.setState({ mouse: flag });
        }
    }
    //单选事件
    checkChange = (id) => {
        return (event) => {
            this.props.undataTodo(id, event.target.checked);
        }
    }
    //删除事件
    delBtn = (id) => {
        if (window.confirm("确定要删除不？")) {
            this.props.delTodo(id);
        }
    }
    render() {
        const { name, flag, id } = this.props;
        const { mouse } = this.state;
        return (
            <li style={{ backgroundColor: mouse ? "#ddd" : "white" }} onMouseEnter={this.mouseHover(true)} onMouseLeave={this.mouseHover(false)}>
                <label>
                    <input type="checkbox" checked={flag} onChange={this.checkChange(id)} />
                    <span>{name}</span>
                </label>
                <button style={{ display: mouse ? "block" : "none" }} onClick={() => this.delBtn(id)}>删除</button>
            </li>

        )
    }
}
